<template>
	<view>
		{{$store.state.count}}
		<button @tap="getCount">getCount</button>
		<view > count=> {{count}} </view>
		<view > myCount=> {{myCount}} </view>
		<button @tap="myChangeCount"> change count</button>
		<button @tap="getUserInfo"> getUserInfo</button>
		<view>
			name:{{userInfo.name}}
			age:{{userInfo.age}}
		</view>
	</view>
</template>

<script>
	// 辅助函数
	import {mapState,mapMutations,mapActions} from 'vuex'
	export default {
		name:"User",
		data() {
			return {
				count:10
			};
		},
		computed:{
			// ...mapState(['count','num'])
			...mapState({
				// key:value
				myCount:(state)=>state.count,
				userInfo:(state)=>state.userInfo
			})
		},
		methods:{
			// ...mapMutations(['changeCount']),
			...mapMutations({
				// key:value
				changeCountInCom:'changeCount'
			}),
			
			// ...mapActions(['getUserInfo'])
			...mapActions({
				myGetUserinfo:'getUserInfo'
			}),
			getCount(){
				// console.log(this.$store.state.count)
				console.log(this.count);
				console.log(this.myCount);
			},
			myChangeCount(){
				// this.$store.commit('changeCount',8)
				// this.changeCount(4)
				this.changeCountInCom(5)
			},
			getUserInfo(){
				// this.$store.dispatch('getUserInfo')
				this.myGetUserinfo()
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>
